<template>
    <div class="cardDiv">
      <!-- wrap自动换行 -->
      <van-row wrap>
        <van-cell-group inset v-for="tag in tagCardData" style="margin-bottom: 10px;">
          <van-cell style="display:flex;width: 150px">
            <template #title>
              <span>{{tag.tagName}}</span>
            </template>
            <template #right-icon>
              <van-checkbox v-model="tag.select" icon-size="18px"/>
            </template>
            <!--        <template #label>-->
            <!--          <van-text-ellipsis rows="2" :content="tag.desc" style="width: 50px"/>-->
            <!--        </template>-->
          </van-cell>
        </van-cell-group>
      </van-row>
    </div>



</template>

<script setup lang="ts">

import {ref, watch} from "vue";

const props = defineProps(['tagCardData']);
const tagCardData = ref(props.tagCardData);


//监听函数，监听props属性父组件传递给子组件的数据变化，因为props不能被修改！
watch(
    () => props.tagCardData,
    (newValue) => {
      tagCardData.value = newValue;//监听变化的新值
    },
    { immediate: true }
);

</script>

<style scoped>
.cardDiv{
  margin-top: 10px;
}
.cardDiv .van-row .van-cell-group{
    margin-right: 0px;
    margin-left: 20px;
}

</style>